import React from "react";
import {createUseStyles} from "react-jss"
import {useDispatch, useSelector} from "react-redux";
import {fetchHomeData} from "../../store/actions/home";

const useStyle = createUseStyles({
  root: {
    color: "#bf2722"
  }
})

const Home = () => {
  const classes = useStyle()
  const dispatch = useDispatch()
  const homeData = useSelector((state => state.home))
  const [value, setValue] = React.useState(0)
  const handleClick = () => {
    setValue(value + 1)
  }
  React.useEffect(() => {
    dispatch(fetchHomeData)
  }, [])


  return (
    <>
      <h1>{value}</h1>
      <div className={classes.root}>我是首页</div>
      <button onClick={handleClick}>点我</button>
      <ul>
        {
          homeData?.articles?.map((item) => {
            return (
              <li key={item.id}>
                <p>{item.title}</p>
                <p>{item.content}</p>
              </li>
            )
          })
        }
      </ul>
    </>
  )

}
export default Home
